<template>
	<view :style="[{paddingTop:CustomBar+'px'}]">
		<cu-custom bgColor="bg-gray" :isBack="true" fatherCss="box-shadow:none">
			<block slot="backText"></block>
			<block slot="content">{{typeText}}</block>
		</cu-custom>
		<view class="particulars-cont" :style="[{minHeight: scrollH-CustomBar-10+'px'},{marginTop: '10px'}]">
			<view class="top-truth">
				<view :class="truthIndex==0?'active':''" @click="changeTruth(0)">全部</view>
				<view :class="truthIndex==1?'active':''" @click="changeTruth(1)">收入</view>
				<view :class="truthIndex==2?'active':''" @click="changeTruth(2)">支出</view>
			</view>
			<view class="detail-list" v-if="truthIndex==0">
				<view class="item" v-for="(item,index) in allList" :key="index">
					<image :src="item.icon" mode=""></image>
					<view class="info">
						<view class="">
							{{item.type_name}}
						</view>
						<view class="">{{item.create_time}}</view>
					</view>
					<view class="price">
						<text v-if="item.operate==1">+</text>
						<text v-if="item.operate==2">-</text>
						<text v-if="typeText=='账单明细'">{{item.money}}元</text>
						<text v-if="typeText=='积分明细'">{{item.number}}积分</text>
					</view>
				</view>
				<tui-divider width="60%" :gradual="true" v-if="allNoMore">没有更多了~</tui-divider>
				<no-content :showType="'date'" v-if='allNoContent' :tips="'还没有明细,快去体验吧'"></no-content>
			</view>
			<view class="detail-list" v-if="truthIndex==1">
				<view class="item" v-for="(item,index) in incomeList" :key="index">
					<image :src="item.icon" mode=""></image>
					<view class="info">
						<view class="">
							{{item.type_name}}
						</view>
						<view class="">{{item.create_time}}</view>
					</view>
					<view class="price">
						<text v-if="item.operate==1">+</text>
						<text v-if="item.operate==2">-</text>
						<text v-if="typeText=='账单明细'">{{item.money}}元</text>
						<text v-if="typeText=='积分明细'">{{item.number}}积分</text>
					</view>
				</view>
				<tui-divider width="60%" :gradual="true" v-if="incomeNoMore">没有更多了~</tui-divider>
				<no-content :showType="'date'" v-if='incomeNoContent' :tips="'还没有收入明细,快去体验吧'"></no-content>
			</view>
			<view class="detail-list" v-if="truthIndex==2">
				<view class="item" v-for="(item,index) in expendList" :key="index">
					<image :src="item.icon" mode=""></image>
					<view class="info">
						<view class="">
							{{item.type_name}}
						</view>
						<view class="">{{item.create_time}}</view>
					</view>
					<view class="price">
						<text v-if="item.operate==1">+</text>
						<text v-if="item.operate==2">-</text>
						<text v-if="typeText=='账单明细'">{{item.money}}元</text>
						<text v-if="typeText=='积分明细'">{{item.number}}积分</text>
					</view>
				</view>
				<tui-divider width="60%" :gradual="true" v-if="expendNoMore">没有更多了~</tui-divider>
				<no-content :showType="'date'" v-if='expendNoContent' :tips="'还没有支出明细,快去体验吧'"></no-content>
			</view>
		</view>
	</view>
</template>

<script>
	import noContent from './component/noContent'
	export default {
		components: {
			noContent
		},
		data() {
			return {
				typeText: '',
				CustomBar: this.CustomBar,
				scrollH: '',
				truthIndex: 0,

				allList: [],
				incomeList: [],
				expendList: [],
				// 页码
				allPage: 1,
				incomePage: 1,
				expendPage: 1,
				// 总页数
				allLastPage: '',
				incomeLastPage: '',
				expendLastPage: '',
				// 没有更多了
				allNoMore: false,
				incomeNoMore: false,
				expendNoMore: false,
				// 没有内容
				allNoContent: false,
				incomeNoContent: false,
				expendNoContent: false,
			}
		},
		onReady() {
			uni.setNavigationBarColor({
				frontColor: '#000000',
				backgroundColor: '#ffffff'
			})
		},
		onReachBottom() {
			var that = this
			var truthIndex = this.truthIndex
			switch (truthIndex) {
				case 0:
					if (that.allPage > that.allLastPage) {
						that.allNoMore = true
						return
					}
					that.getAllListNew()
					break
				case 1:
					if (that.incomePage > that.incomeLastPage) {
						that.incomeNoMore = true
						return
					}
					that.getIncomeListNew()
					break
				case 2:
					if (that.expendPage > that.expendLastPage) {
						that.expendNoMore = true
						return
					}
					that.getExpendListNew()
					break
			}
		},
		onLoad(options) {
			if (options.status) {
				this.typeText = options.status == 1 ? '账单明细' : '积分明细'
				if (options.status == 1) {
					this.apiUrl = '/UserLog/get_user_log'
				} else {
					this.apiUrl = '/IntegralLog/get_log_list'
				}
			}
			uni.getSystemInfo({
				success: (res) => {
					this.scrollH = res.windowHeight
				}
			})
			//获取所有的
			this.getAllListNew()
			this.getIncomeListNew()
			this.getExpendListNew()
		},
		methods: {
			changeTruth(index) {
				this.truthIndex = index
			},
			getAllListNew() {
				var that = this
				this.$request({
					url: that.apiUrl,
					data: {
						page: that.allPage
					},
					success: res => {
						if (res.data.status == 1) {
							if (that.allPage == 1 && res.data.data.data.length == 0) {
								that.allNoContent = true
								return
							}
							that.allList = that.allList.concat(res.data.data.data)
							that.allPage++
							that.allLastPage = res.data.data.pageCount

							if (that.allLastPage == 1) {
								that.allNoMore = true
							}
						}
						uni.hideLoading()
					},
					fail: () => {},
					complete: () => {}
				});
			},
			getIncomeListNew() {
				var that = this
				this.$request({
					url: that.apiUrl,
					data: {
						page: that.incomePage,
						operate: 1

					},
					success: res => {
						if (res.data.status == 1) {
							if (that.incomePage == 1 && res.data.data.data.length == 0) {
								that.incomeNoContent = true
								return
							}
							that.incomeList = that.incomeList.concat(res.data.data.data)
							that.incomeLastPage = res.data.data.pageCount
							that.incomePage++
							if (that.incomeLastPage == 1) {
								that.incomeNoMore = true
							}
						}
						uni.hideLoading()
					},
					fail: () => {},
					complete: () => {}
				});
			},
			getExpendListNew() {
				var that = this
				this.$request({
					url: that.apiUrl,
					data: {
						page: that.expendPage,
						operate: 2
					},
					success: res => {
						if (res.data.status == 1) {
							if (that.expendPage == 1 && res.data.data.data.length == 0) {
								that.expendNoContent = true
								return
							}
							that.expendList = that.expendList.concat(res.data.data.data)
							that.expendPage++
							that.expendLastPage = res.data.data.pageCount

							if (that.expendLastPage == 1) {
								that.expendNoMore = true
							}
						}
						uni.hideLoading()
					},
					fail: () => {},
					complete: () => {}
				});
			}
		}
	}
</script>

<style>
	page {
		background: #f5f5f5;
	}
</style>
<style scoped>
	.particulars-cont {
		width: 700rpx;
		background: #fff;
		margin: 0 auto;
		background-color: #ffffff;
		border-radius: 10rpx 10rpx 0rpx 0rpx;
		display: flex;
		flex-direction: column;
	}

	.top-truth {
		height: 80rpx;
		width: 100%;
		border-radius: 10rpx 10rpx 0rpx 0rpx;
		background-color: #ffffff;
		display: flex;
	}

	.top-truth>view {
		flex: 1;
		border-bottom: 4rpx solid transparent;
		box-sizing: border-box;
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		font-size: 30rpx;
		color: #333333;
	}

	.top-truth .active {
		border-bottom: 4rpx solid #f34930;
		color: #f34930;
	}

	.detail-list {
		flex: 1;
		padding: 10rpx 20rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		overflow-y: auto;
	}

	.detail-list .item {
		display: flex;
		/* align-items: center; */
		padding: 20rpx 0;
	}

	.detail-list .item image {
		width: 48rpx;
		height: 48rpx;
		margin-right: 20rpx;
	}

	.detail-list .item .info {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

	}

	.detail-list .item .info>view:nth-child(1) {
		font-size: 28rpx;
		line-height: 34rpx;
		letter-spacing: 1rpx;
		color: #333333;
		margin-bottom: 16rpx;
		/* margin-top: 10rpx; */
	}

	.detail-list .item .info>view:nth-child(2) {
		font-size: 24rpx;
		line-height: 30rpx;
		letter-spacing: 1rpx;
		color: #999999;
	}

	.detail-list .item .price text {
		font-size: 28rpx;
		line-height: 80rpx;
		letter-spacing: 1rpx;
		color: #333333;

	}
</style>
